<#include "/WEB-INF/views/admin/common/layout/__formlayout.html">
<#assign pageCss>
<link rel="stylesheet" href="${ctx}/resource/validationengine/css/validationEngine.jquery.css">
<link rel="stylesheet" href="${ctx}/resource/jquery/css/multi-select.css">
</#assign>
<#assign pageScript>
<script type="text/javascript" src="${ctx}/resource/validationengine/js/jquery.validationEngine-en.js"></script>
<script type="text/javascript" src="${ctx}/resource/validationengine/js/jquery.validationEngine.js"></script>
<script type="text/javascript" src="${ctx}/resource/jquery/jquery.quicksearch.js"></script>
<script type="text/javascript" src="${ctx}/resource/jquery/jquery.multi-select.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	<#if offer??>
		<#if target_all == '1'>
			$("#target_user").val('all');
		<#else>
			$("#other_radio").attr("checked","checked");
			$("#target_user").val('other');
			$("#others").show();
		</#if>
	</#if>
		
		 $("input[type=radio][name=radio]").change(function(){
			$("#others").toggle();
			var val=$('input:radio[name="radio"]:checked').val();
			$("#target_user").val(val);
		}); 
		
		
		$('#custom-headers').multiSelect({
			  selectableHeader: "<input type='text' class='search-input' autocomplete='off' placeholder=''>",
			  selectionHeader: "<input type='text' class='search-input' autocomplete='off' placeholder=''>",
			  afterInit: function(ms){
			    var that = this,
			        $selectableSearch = that.$selectableUl.prev(),
			        $selectionSearch = that.$selectionUl.prev(),
			        selectableSearchString = '#'+that.$container.attr('id')+' .ms-elem-selectable:not(.ms-selected)',
			        selectionSearchString = '#'+that.$container.attr('id')+' .ms-elem-selection.ms-selected';

			    that.qs1 = $selectableSearch.quicksearch(selectableSearchString)
			    .on('keydown', function(e){
			      if (e.which === 40){
			        that.$selectableUl.focus();
			        return false;
			      }
			    });

			    that.qs2 = $selectionSearch.quicksearch(selectionSearchString)
			    .on('keydown', function(e){
			      if (e.which == 40){
			        that.$selectionUl.focus();
			        return false;
			      }
			    });
			  },
			  afterSelect: function(){
			    this.qs1.cache();
			    this.qs2.cache();
			  },
			  afterDeselect: function(){
			    this.qs1.cache();
			    this.qs2.cache();
			  }
			});
	
	$("#frm").validationEngine('attach', {
		promptPosition : 'topLeft',
		scroll : false
	});
	
	$("#role").change(function() {
		var selected = $("#role option:selected").text();
		if(selected == "Customer"){
			$("div[name='trigger']").each(function(){
				$(this).show();
			});
		}else{
			$("div[name='trigger']").each(function(){
				$(this).hide();
			});
		}
		
	});
	
	$("#subBtn").click(function() {
		var frm = $("#frm");
		var selectedItem = [];
		 $("#custom-headers option:selected").each(function (){
		     selectedItem.push($(this).val());
		 });
		var selected = selectedItem.join(",");
		var t = $("#target_user").val();
		var flag = true;
		if(t =='' || (t == 'other' && selected == '')){
			flag = false;
			layer.msg("target user is required", {
				time : 1000,
				icon : 2
			});
		}else if(t=='other' && selected !=''){
			$("#target_user").val(selected);
		}else{
			$("#target_user").val("all");
		}
		if (frm.validationEngine("validate") && flag) {
			$.ajax({
				type : "POST",
				url : "${ctx}/admin/sys/offer/save_update",
				data : frm.serialize(),
				success : function(result) {
					if (result.isSuccess) {
						layer.msg(result.msg, {
							icon : 1,
							time : 1000,
							end : function() {
								//信息提示完成后关闭表单窗口
								var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
								parent.layer.close(index); //再执行关闭  
							}
						});
					} else {
						layer.msg(result.msg, {
							time : 1000,
							icon : 2
						});
					}
				}
			});
		}
	});
});
</script>
</#assign>
<@formlayout>
<div class="row">
	<div class="am-u-sm-12 am-u-md-12 am-u-lg-12" style="width:800px;height:600px">
		<div class="widget am-cf">
			<div class="widget-body am-fr">
				<form class="am-form tpl-form-border-form" id="frm"
					action="${ctx}/admin/sys/offer/save">
					<input type="hidden" name="offer.id" id="id" value="${offer.id!}">
					<input type="hidden" 
								class="tpl-form-input validate[required]" id="owner" value="${offer.owner!}" 
								name="offer.owner">
					<#if offer??>
					<div class="am-form-group">
						<label for="click_url" class="am-u-sm-3 am-form-label">click_url </label>
						<div class="am-u-sm-9">
							<input type="text" disabled="disabled"
								class="tpl-form-input validate[required,custom[url]]" id="click_url" value="${offer.click_url!}" 
								name="offer.click_url" placeholder="please enter click_url">
						</div>
					</div>
					<#else>
					<div class="am-form-group">
						<label for="click_url" class="am-u-sm-3 am-form-label">click_url </label>
						<div class="am-u-sm-9">
							<input type="text"
								class="tpl-form-input validate[required,custom[url]]" id="click_url" value="${offer.click_url!}" 
								name="offer.click_url" placeholder="please enter click_url">
						</div>
					</div>
					</#if>
					<div class="am-form-group">
						<label for="click" class="am-u-sm-3 am-form-label">price </label>
						<div class="am-u-sm-9">
							<input type="text"
								class="tpl-form-input validate[required,custom[price]]" id="price" value="${offer.price!}" 
								name="offer.price" placeholder="please enter price">
						</div>
					</div>
					<div name="trigger" class="am-form-group">
						<label for="clickNumLimit" class="am-u-sm-3 am-form-label">click num limit</label>
						<div class="am-u-sm-9">
							<input type="text"
								class="tpl-form-input validate[custom[number],maxSize[200]]" value="${offer.click_num_limit!}"
								id="clickNumLimit" name="offer.click_num_limit" placeholder="please enter click number limit">
						</div>
					</div>
					<div class="am-form-group">
						<label for="click_url" class="am-u-sm-3 am-form-label">target user</label>
						<div class="am-u-sm-9">
						  <label class="am-radio-inline">
						    <input type="radio" name="radio" value="all" checked="checked" data-am-ucheck>all
						  </label>
						  <label class="am-radio-inline">
						    <input type="radio" id="other_radio" name="radio" value="other" data-am-ucheck>other
						  </label>
						</div>
					</div>
					
					<input id="target_user" type="hidden" name="target_user" value="all" >
					
					<div id="others" class="am-form-group" style="display:none">
						<label for="click_url" class="am-u-sm-3 am-form-label"></label>
						<div class="am-u-sm-9">
							<select id='custom-headers' multiple='multiple'  class="am-selected-text">
							<#if offer?? && !(target_all??)>
								  <#list agents as agent>
								  	<option value="${agent.id}">${agent.name}</option>
								  </#list>
							       <#list target_user as tu>
											<option value="${tu.id}" selected="selected">${tu.name}</option>
									</#list>
								<#else>
									<#list agents as agent>
										<option value="${agent.id}">${agent.name}</option>
									</#list>
								</#if>
							</select>
						</div>
					</div>
					
					<div class="am-form-group">
						<div class="am-u-sm-9 am-u-sm-push-3">
							<button type="button"
								class="am-btn am-btn-primary tpl-btn-bg-color-success "
								id="subBtn">submit</button>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>
</@formlayout>

